<template>
  <div
    style="
      width: 100%;
      height: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background: #f3f3f4;
    "
  >
    <div style="width: 380px; height: 100%; background: #fff">
      <div style="padding: 10px; border-bottom: 1px solid #ccc">航标列表</div>
      <div style="width: 100%; height: calc(100% - 42px); padding: 10px">
        <el-input
          placeholder="请输入内容"
          style="margin-bottom: 10px"
          class="inputcsls"
          v-model="valInput"
        >
          <el-button slot="append" icon="el-icon-search" @click="getsearch"
            >搜索</el-button
          >
        </el-input>
        <div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <div slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
            </div>
          </el-tree>
        </div>
      </div>
    </div>
    <div
      style="
        width: calc(100% - 390px);
        height: 100%;
        padding: 10px;
        background: #fff;
      "
    >
      <div
        style="margin-bottom: 10px; display: flex; justify-content: flex-end"
      >
        <el-button type="danger" plain icon="el-icon-delete">删除</el-button
        ><el-button type="primary" icon="el-icon-tickets">导出</el-button>
      </div>
      <div
        style="
          width: 100%;
          height: calc(100% - 50px);
          display: flex;
          overflow-y: auto;
        "
      >
        <el-descriptions
          style="width: calc(100% - 30%)"
          title=""
          :column="2"
          border
        >
          <el-descriptions-item
            v-for="(item, i) in objConList"
            :key="i"
            :span="item.span"
            labelStyle="width: 120px;color:#000"
          >
            <template slot="label">
              <!-- <i class="el-icon-user"></i> -->
              {{ item.label }}
            </template>
            <div>
              <!-- // getDataCope(this[item.list]?this[item.list]:dict.type[item.list], form[item.code]) -->
              <span v-if="item.list">{{
                getDataCope(item.list, form[item.code], "value", "label")
              }}</span>
              <span v-else>{{ form[item.code] ? form[item.code] : "--" }}</span>
              <span>{{ item.units }}</span>
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <div style="width: 30%; height: 100%">
          <img
            src="@/assets/hb_img/bj/img_number@2x.png"
            alt=""
            style="width: 100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getDeptNavigationMarkList,
  getNavigationMark,
} from "@/api/system/navigationMark";
import { deptTree } from "@/api/daping/daping";
export default {
  dicts: ["device_type"],
  //变量
  data() {
    return {
      valInput: "",
      treeData: [
        {
          label: "一级 1",

          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "mc",
      },
      form: { xxx: "", ab: 0 },
      objConList: [
                { label: "航标名称", code: "markName", units: "", span: "2" },
        { label: "所属航道", code: "channel", units: "", span: "1" },
        {
          label: "岸别",
          code: "bankSide",
          units: "",
          span: "1",
          list: [],
        },
        { label: "航标类型", code: "markType", units: "", span: "1" },
        { label: "设标地点", code: "location", units: "", span: "1" },
        { label: "管养单位", code: "managementUnit", units: "", span: "1" },
        { label: "设置方式", code: "setupMethod", units: "", span: "1" },
        { label: "设标水深", code: "setupDepth", units: "", span: "1" },
        { label: "安全距离", code: "safeDistance", units: "", span: "1" },
        { label: "标体颜色", code: "markColor", units: "", span: "1" },
        { label: "航标高度", code: "markHeight", units: "", span: "1" },
        { label: "标体形状", code: "markShape", units: "", span: "1" },
        { label: "标题材质", code: "markMaterial", units: "", span: "1" },
        { label: "航标坐标", code: "xxx", units: "", span: "1" },
        { label: "锚链长度(浮标)", code: "chainLength", units: "", span: "1" },
        { label: "是否发光", code: "isLuminous", units: "", span: "1" },
        { label: "是否遥测遥控", code: "isRemoteMonitor", units: "", span: "1" },
        { label: "仪器", code: "instrumentType", units: "", span: "1" },
        { label: "灯光功率", code: "lightPower", units: "", span: "1" },
        { label: "额定电压", code: "ratedVoltage", units: "", span: "1" },
        { label: "透镜", code: "lens", units: "", span: "1" },
        { label: "光色", code: "lightColor", units: "", span: "1" },
        { label: "闪光", code: "flashType", units: "", span: "1" },
        { label: "灯光视距", code: "lightVisualRange", units: "", span: "1" },
        { label: "航标视距", code: "markVisualRange", units: "", span: "1" },
        { label: "灯光能源", code: "lightEnergySource", units: "", span: "1" },
        { label: "电池类别", code: "batteryType", units: "", span: "1" },
        { label: "电池容量", code: "batteryCapacity", units: "", span: "2" },
        { label: "设标时间", code: "setupTime", units: "", span: "1" },
        { label: "最近改造时间", code: "latestModifyTime", units: "", span: "1" },
        { label: "遥测号码", code: "remoteMonitorNumber", units: "", span: "2" },
      ],
    };
  },
  //初始
  mounted() {
    this.$nextTick(() => {
      this.getDeptNavigationMarkList();
      setTimeout(() => {
        this.dataConfig();
      }, 500);
    });
  },
  //事件
  methods: {
    handleNodeClick(data, node, tree) {
      // if (!data.children) {
      // this.getDeptNavigationMarkList(data.label)
      // }
      if (data.markType == 2) {
        this.getNavigationMark(data.id);
      }
    },
    getsearch() {},

    getDataCope(data = [], status, tyName = "id", fhName = "name") {
      if (status == null) {
        return;
      }
      let name = [];
      if (typeof status == "object") {
        //参数为数组的情况
        let objList = status;
        data.forEach((item) => {
          objList.forEach((s) => {
            if (item[tyName] == s) {
              name.push(item[fhName]);
            }
          });
        });
      } else if (typeof status == "string" && status.indexOf(",") > 0) {
        //参数为字符串‘，’号分割
        let objList = status;
        if (status.indexOf(",") > 0) {
          objList = status.split(",");
        }
        data.forEach((item) => {
          objList.forEach((s) => {
            if (item[tyName] == s) {
              name.push(item[fhName]);
            }
          });
        });
      } else {
        data.forEach((item) => {
          if (item[tyName] == status) {
            name.push(item[fhName]);
          }
        });
      }
      return name.join(",");
    },
    dataConfig() {
      this.objConList.forEach((item) => {
        if (item.code == "ab") {
          item.list = JSON.parse(JSON.stringify(this.dict.type.device_type));
        }
      });
      console.log(this.objConList);
    },
    // getDeptTree(){
    //   deptTree().then((res) => {
    //     console.log(res,'data');
    //     if (res.code==200) {
    //       this.treeData=res.data
    //     }
    //   })
    // },
    getDeptNavigationMarkList() {
      getDeptNavigationMarkList().then((res) => {
        if (res.code == 200) {
          let data = res.data;
          data.sort((a, b) => a.parentId - b.parentId);
          this.treeData = this.handleTree(res.data, "id", "parentId");
        }
      });
    },
    getNavigationMark(id) {
      getNavigationMark( id ).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    }
  },
  //销毁
  beforeDestroy() {},
};
</script>
<style scoped></style>
